React Learn Note 4
React学习笔记(四)
标签(空格分隔): React JavaScript
三、组件&Props
组件可以将UI切分成一些独立的、可复用的部件,这样你就只需专注于构建每一个单独的部件。
组件接收props,返回react元素。
1. 函数定义\类定义组件
最简单组件方式 - 函数定义组件:
// 函数定义组件function Welcome(props) { returnHello, {props.name}!
;}
ES6 class定义组件,效果同上:
// ES6 class定义组件class Welcome extends React.Component { render() { returnHello, {this.props.name}!
; }}
2. 组件渲染
将组件作为React元素,标签的属性作为props键值:
const element5_1 =;ReactDOM.render( element5_1, document.getElementById('root5'));
警告: 组件名称必须大写字母开头。
3. 组合组件
React组件也可以嵌套。
function App() { return ();}ReactDOM.render(, document.getElementById('root6'));
警告: 组件的返回值只能有一个根元素。所以将多个Welcome
元素用div
包裹。
4. 提取组件
可以将组件切分为更小的组件。
function formatDate(date) { return date.toLocaleTimeString();}function Comment(props) { return ();}ReactDOM.render({props.author.name}{props.text}{formatDate(props.date)}, document.getElementById('root7'));
这个组件接收author(对象)、text(字符串)、以及date(Date对象)作为props。是个复杂的组件。接下来我们提取拆分这个组件。
首先提取Avatar组件:
// 提取组件function Avatar(props) { return ( );}function UserInfo(props) { return ();}// 最终Comment组件被简化为function Comment2(props) { return ( {props.user.name});}ReactDOM.render( {props.text}{formatDate(props.date)}, document.getElementById('root8'));
5. Props的只读性
无论是使用函数或是类来声明一个组件,它决不能修改它自己的props。
The end... Last updated by: Jehorn, Jan 07, 2018, 5:44 PM